<template>
  <Drawer placement="right" :closable="true" v-model="visible" width="400" scrollable @on-close="cancel">
    <template #header>
      <div class="flex flex-col justify-between">
        <div class="flex items-center mb-4 gap-x-2">
          <img src="~@/assets/images/icon_qa.jpg" class="w-6 h-6" alt="Start icon" />
          <div class="flex flex-col gap-y-1">
            <p class="text-lg font-semibold text-black">{{ title }}</p>
          </div>
        </div>
        <div class="text-sm text-gray-500">
          支持中间向用户提问问题,支持预置选项提问和开放式问题提问两种方式
        </div>
      </div>
    </template>

    <CommonCollapse title="API" tip="API接口的地址">
      <!-- <template #right>
        <Button type="text" size="small">导入cURL</Button>
      </template> -->

      <div class="flex items-center">
        <Select v-model="form.selectmodel">
          <Option v-for="item in modalGather" :key="item.id" :value="item.id">{{
            item.name
          }}</Option>
        </Select>
        <!-- <Icon class="ml-2" type="md-settings" size="20" /> -->
      </div>
    </CommonCollapse>
    <Divider></Divider>

    <CommonCollapse title="输入" tip="输入需要添加到提示词的信息，这些信息可以被下方的提示词引用">
      <template #right>
        <Button type="primary" size="small" icon="md-add" @click="addInput('inoutlist')"></Button>
      </template>
      <div class="panel-table">
        <div class="panel-table-header">
          <div class="name" style="width: 150px">变量名</div>
          <div class="name">变量值</div>
        </div>
        <div class="panel-table-list">
          <Form v-if="form" ref="formEl" :model="form" label-position="top">
            <div
              class="flex items-center mb-4"
              v-for="(item, index) in form.inoutlist"
              :key="index"
            >
              <div class="panel-table-item" style="width: 160px">
                <FormItem
                  :key="index"
                  :prop="'inoutlist.' + index + '.varname'"
                  :rules="{
                    required: true,
                    message: '变量名不可为空',
                    trigger: 'blur'
                  }"
                >
                  <Input v-model="item.varname" placeholder="输入变量名" size="small" />
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 100px; margin-right: 0">
                <FormItem>
                  <Select size="small" v-model="item.vartype">
                    <Option v-for="item in BE_TYPE_LIST" :value="item.value" :key="item.value">
                      {{ item.label }}</Option
                    >
                  </Select>
                </FormItem>
              </div>
              <div class="panel-table-item" style="width: 180px">
                <FormItem
                  :prop="'inoutlist.' + index + '.varparam'"
                  :rules="{
                    required: true,
                    message: '变量值不可为空',
                    trigger: 'blur'
                  }"
                >
                  <Input
                    size="small"
                    v-model="item.varparam"
                    check-strictly
                    placeholder="输入参数值"
                  >
                  </Input>
                </FormItem>
              </div>
              <div class="panel-table-item btn" @click="removeInput('inoutlist', index)">
                <Icon type="md-remove" />
              </div>
            </div>
          </Form>
        </div>
      </div>
    </CommonCollapse>
    <Divider></Divider>

    <CommonCollapse title="提问内容" tip="配置HTTP请求头,用于传递认证信息,内容类型等关键参数">
      <div class="flex items-center">
        <Input
          v-model="form.content"
          type="textarea"
          :rows="3"
          :placeholder="`请输入提问内容`"
          style="margin-top: 8px"
        />
      </div>
    </CommonCollapse>
    <Divider></Divider>

    <CommonCollapse title="请选择回答类型">
      <ul class="flex items-center ans-type">
        <li
          v-for="item in QA_TYPE_OPTIONS"
          :key="item.value"
          :class="{ avtive: form.answertype === item.value }"
          @click="form.answertype = item.value"
        >
          {{ item.label }}
        </li>
      </ul>

      <template v-if="form.answertype === QA_TYPE_OPTIONS[1].value">
        <p class="ans-label">设置选项内容</p>
        <div class="ans-content">
          <div class="tabs">
            <div
              v-for="item in SETOPTION_OPTIONS"
              :key="item.value"
              class="tab-row"
              :class="{ active: form.setoption === item.value }"
              @click="form.setoption = item.value"
            >
              {{ item.label }}
            </div>
          </div>

          <ul class="fixed-header">
            <li>选项</li>
            <li>内容</li>
          </ul>

          <template v-if="form.setoption === 'fixed'">
            <draggable v-model="form.fixedlist" animation="250">
              <template #item="{ element, index }">
                <div class="drag-item">
                  <span class="name">{{ element.sort }}</span>

                  <div class="right-content">
                    <Input v-model="element.content" placeholder="输入或引用参数值" />

                    <div
                      class="panel-table-item btn"
                      @click.stop="updateSelect('fixedlist', index)"
                    >
                      <Icon type="md-remove" />
                    </div>
                  </div>
                </div>
              </template>
            </draggable>

            <Button icon="md-add" class="add-ans-btn" @click="ansAdd('fixedlist')"
              >新增选项</Button
            >
          </template>

          <div v-else class="drag-item">
            <span class="name" style="padding-left: 2px">A-Z</span>

            <div class="right-content">
              <!-- <span>{{ 'Array<String>' }}</span> -->

              <Input v-model="form.dynamicvo.content" size="small" placeholder="输入或引用参数值" />

              <!-- <Icon class="ml-2" type="md-settings" size="20" /> -->
            </div>
          </div>

          <div class="drag-item">
            <span class="name">其他</span>
            <span style="flex: 1">此选项对用户不可见，当用户回复无关内容时，走此分支</span>
          </div>
        </div>
      </template>
    </CommonCollapse>
    <Divider></Divider>

    <CommonCollapse title="输出" tip="大模型运行完成后生成的内容">
      <template v-if="form.answertype === QA_TYPE_OPTIONS[0].value" #right>
        <Checkbox v-model="form.isreply" :true-value="true" :false-value="false"
          >从回复中提取字段</Checkbox
        >
      </template>

      <el-tree v-if="form.answertype === QA_TYPE_OPTIONS[1].value" default-expand-all :data="form.commonoutvo">
        <template #default="{ node, data }">
          <div class="panel-table">
            <div class="flex items-center">
              <span class="text-sm">{{ data.varname }}</span>

              <div class="text-bg-normal">{{ data.vartype }}</div>
            </div>
          </div>
        </template>
      </el-tree>

      <template v-else>
        <div class="panel-table">
          <div class="panel-table-header">
            <div class="name">变量名</div>
            <div class="name" style="margin-left:110px">变量类型</div>
            <div class="name" style="margin-left: 40px">必填</div>
          </div>
          <div class="panel-table-list">
            <Form v-if="form" ref="formEl" :model="form" label-position="top">
              <div
                style="margin-bottom: 16px"
              >
                <div class="flex items-center mb-4" style="margin-bottom: 0">
                  <div class="panel-table-item" style="width: 160px">
                    <FormItem
                      :key="index"
                      :prop="'outputjsonvo' + '.varname'"
                      :rules="{
                        required: true,
                        message: '变量名不可为空',
                        trigger: 'blur'
                      }"
                    >
                      <Input
                        v-model="form.outputjsonvo.varname"
                        readonly
                        placeholder="输入变量名"
                        size="small"
                      />
                    </FormItem>
                  </div>
                  <div class="panel-table-item" style="width: 100px; margin-right: 0">
                    <FormItem>
                      <Select size="small" v-model="form.outputjsonvo.vartype" disabled>
                        <Option v-for="item in BE_TYPE_LIST" :value="item.value" :key="item.value">
                          {{ item.label }}</Option
                        >
                      </Select>
                    </FormItem>
                  </div>
                  <div class="panel-table-item" style="margin-left: 8px">
                    <FormItem>
                      <Checkbox
                        v-model="form.outputjsonvo.isrequired"
                        :true-value="true"
                        :false-value="false"
                        disabled
                      ></Checkbox>

                      <Icon
                        type="md-resize"
                        style="padding: 4px; cursor: pointer"
                        :style="{ 'background-color': form.outputjsonvo.descShow ? '#e0e3fa' : '' }"
                        @click="form.outputjsonvo.descShow = !form.outputjsonvo.descShow"
                      />
                    </FormItem>
                  </div>
                </div>
                <div v-if="form.outputjsonvo.descShow">
                  <p>描述</p>

                  <Input
                    v-model="form.outputjsonvo.vardesc"
                    disabled
                    placeholder="用户本轮对话输入内容"
                    size="small"
                  />
                </div>
              </div>
            </Form>
          </div>
        </div>

        <template v-if="form.isreply">
          <Divider></Divider>

          <p style="color: #333; font-weight: bold">设置需要从用户的回答中提取的关键字段</p>
          <div class="panel-table">
            <div class="panel-table-header">
              <div class="name">变量名</div>
              <div class="name" style="margin-left:110px">变量类型</div>
              <div class="name" style="margin-left:40px">必填</div>
              <Button
                type="primary"
                size="small"
                icon="md-add"
                style="margin-left: auto"
                @click="addInput('outputjsonlist')"
              ></Button>
            </div>
            <div class="panel-table-list">
              <Form v-if="form" ref="formEl" :model="form" label-position="top">
                <div
                  v-for="(item, index) in form.outputjsonlist"
                  :key="index"
                  style="margin-bottom: 16px"
                >
                  <div class="flex items-center mb-4" style="margin-bottom: 0">
                    <div class="panel-table-item" style="width: 160px">
                      <FormItem
                        :key="index"
                        :prop="'outputjsonlist.' + index + '.varname'"
                        :rules="{
                          required: true,
                          message: '变量名不可为空',
                          trigger: 'blur'
                        }"
                      >
                        <Input v-model="item.varname" placeholder="输入变量名" size="small" />
                      </FormItem>
                    </div>
                    <div class="panel-table-item" style="width: 100px; margin-right: 0">
                      <FormItem>
                        <Select size="small" v-model="item.vartype">
                          <Option
                            v-for="item in BE_TYPE_LIST"
                            :value="item.value"
                            :key="item.value"
                          >
                            {{ item.label }}</Option
                          >
                        </Select>
                      </FormItem>
                    </div>
                    <div class="panel-table-item" style=" margin-left: 8px">
                      <FormItem>
                        <Checkbox
                          v-model="item.isrequired"
                          :true-value="true"
                          :false-value="false"
                        ></Checkbox>

                        <Icon
                          type="md-resize"
                          style="padding: 4px; cursor: pointer"
                          :style="{ 'background-color': item.descShow ? '#e0e3fa' : '' }"
                          @click="item.descShow = !item.descShow"
                        />
                      </FormItem>
                    </div>
                    <div class="panel-table-item btn" @click="removeInput('outputjsonlist', index)">
                      <Icon type="md-remove" />
                    </div>
                  </div>
                  <div v-if="item.descShow">
                    <p>描述</p>

                    <Input v-model="item.vardesc" placeholder="用户本轮对话输入内容" size="small" />
                  </div>
                </div>
              </Form>
            </div>
          </div>
        </template>
      </template>
    </CommonCollapse>
  </Drawer>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import CommonCollapse from '@/components/CommonCollapse/index.vue'
import { myKnowledge } from '@/api/modules/knowledgeBase'
import { BE_TYPE_LIST } from '../../lib/constant'
import draggable from 'vuedraggable'

const props = defineProps({
  form: {
    type: Object,
    default: () => {}
  },
  title: {
    type: String,
    default: '输出'
  },
  QA_TYPE_OPTIONS: Array,
  SETOPTION_OPTIONS: Array
})

const emit = defineEmits(['add', 'remove', 'cancel'])

const visible = ref(false)

const getLetter = (index) => {
  return String.fromCharCode(65 + index)
}

const ansAdd = (listKey) => {
  let option = {
    varname: '',
    varparam: '',
    vartyep: 'String'
  }
  if(listKey === 'fixedlist') {
    option = {
      sort: getLetter(props.form.fixedlist.length),
      content: ''
    }
  }

  if(listKey === 'outputjsonlist') {
    option = {
      varname: '',
      varparam: '',
      vartype: 'String',
      isrequired: true,
      vardesc: '',
      descShow: false
    }
  }

  emit('add', listKey, option)
}

const updateSelect = (listKey, index) => {
  removeInput(listKey, index)

  emit('update', data => {
    data.fixedlist.forEach((item, i) => {
      item.sort = getLetter(i)
    })
  })
}

// 组件的增删
const addInput = (listKey) => {
  emit('add', listKey)
}
const removeInput = (listKey, index) => {
  if(listKey === 'fixedlist' && props.form[listKey].length <= 2) {
    return
  }

  if (props.form[listKey].length == 1) return
  
  emit('remove', listKey, index)
}
const init = () => {
  visible.value = true
}
const cancel = () => {
  visible.value = false
  emit('cancel')
}

const modalGather = ref([])
const getSelectData = () => {
  myKnowledge.findall().then(({ data }) => {
    modalGather.value = data

    if(!props.form.selectmodel && data.length) {
      props.form.selectmodel = data[0].id
    }
  })
}

defineExpose({
  init
})

onMounted(() => {
  getSelectData()
})
</script>

<style scoped lang="scss">
.panel-table-header {
  align-items: center;
  display: flex;
  gap: 4px;
  padding: 0 4px;

  .name {
    width: unset;
    // margin-right: 6px;
    box-sizing: content-box;
  }
  .center {
    text-align: center;
  }
}

:deep(.ivu-form-item-error-tip){
  font-size: 12px;
}
.panel-table-item {
  height: 30px;
  margin-right: 6px;
  &.center {
    text-align: center;
  }
  &.btn {
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    margin-left: 12px;
    height: 22px;
  }
}
.ivu-drawer-body {
  height: calc(100vh - 90px);
}
.ivu-input-wrapper {
  :deep(.ivu-input) {
    resize: none;
    // margin-top: 8px;
  }
}
.ans-type {
  li {
    border: 1px solid #d1d4df;
    border-radius: 8px;
    padding: 8px 12px;
    flex: 1;
    display: flex;
    align-items: center;
    cursor: pointer;
    font-size: 12px;
    &:hover::before {
      background-color: #f2f3f7;
    }
    &::before {
      content: '';
      display: block;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      border: 1px solid #d1d4df;
      margin-right: 8px;
    }
    &:nth-child(n + 2) {
      margin-left: 8px;
    }
    &.avtive {
      background-color: #eceefe;
      border-color: #4f47f6;
      &::before {
        border-width: 5px;
        border-color: #4f47f6;
      }
    }
  }
}

.ans-label {
  font-size: 12px;
  margin: 12px 0 4px;
}
.ans-content {
  border: 1px solid #d1d4e3;
  border-radius: 8px;
  padding: 8px;
  .tabs {
    display: flex;
    background-color: #f8f8f8;
    border-radius: 8px;
    padding: 4px;
    .tab-row {
      flex: 1;
      text-align: center;
      padding: 4px 0;
      border-radius: 8px;
      cursor: pointer;
      color: #000;
      font-size: 12px;
      &:nth-child(n + 2) {
        margin-left: 4px;
      }
      &:hover {
        background-color: #ebebec;
      }
      &.active {
        background-color: #fff;
      }
    }
  }
  .fixed-header {
    color: #1c1d2359;
    font-size: 12px;
    display: flex;
    margin: 8px 0;
    > li {
      &:first-child {
        width: 67px;
      }
    }
  }
  .drag-item {
    display: flex;
    align-items: center;
    cursor: grab;
    &:nth-child(n + 2) {
      margin-top: 8px;
    }
    .name {
      width: 67px;
      padding-left: 8px;
    }
    .right-content {
      flex: 1;
      display: flex;
      align-items: center;
    }

    // .ivu-input-wrapper{
    //   flex:1;
    // }
  }
  .add-ans-btn {
    width: 100%;
    background-color: #e6e9fd;
    color: #4f47f6;
    border: none;
    margin-top: 8px;
    &:hover {
      background-color: #dcdffd;
    }
  }
}
.el-tree-node__content {
  margin-top: 16px;
}
</style>
